<template>
<div class="app">
      <h1>{{msg}},学生姓名{{        studentName
}}</h1>

       <!--通过父组件给子组件传递函数类型的props  -->
      <School :getSchoolName='getSchoolName'/> 
      
      <!-- 通过父组件给子组件绑定一个自定义事件 (第一种 通过@或v-on) -->
      <!-- <Student @ITsxt='getStudentName' @demo='demo'/>  -->

    <!-- 通过父组件给子组件绑定一个自定义事件 (第二种 通过ref)-->
      <Student ref='student' @click.native='show'/>
      <!-- .native 在组件标签上的原生事件都会认为是自定义事件,如果想用在原生事件后面加上.native-->
</div>
   
</template>

<script>

import Student from './components/Student'
// 引入SchooL组件
import School from './components/School'
 
 

export default {
    name:'App',
     components:{
        School,
        Student,
        
    },
    data() {
        return {
            msg:'你好啊！',
            studentName:""
        }
    },
    methods: {
        getSchoolName(name){
            console.log('App收到学校名',name);
        },
        // getStudentName(name,{sex,age},...params){
        //     console.log('App收到学生名',name,{sex,age},params);
        //     this.studentName=name
        // },
        demo(){
            console.log('demo事件被触发了');
        },
        show(){
            alert('123')
        }
        
    },
    mounted() {
this.$refs.student.$on('ITsxt',function(name,{sex,age},...params){
                 console.log('App收到学生名',name,{sex,age},params);
        this.studentName = name   
        console.log(this);


        // this.$refs.student.$on('ITsxt',(name,{sex,age},...params)=>{
        //          console.log('App收到学生名',name,{sex,age},params);
        // this.studentName = name   
        // console.log(this); //student组件   自定义事件直接绑定时间里面写函数this是触发事件的那个组件 ,可以用this调用methods的方法
            })  //绑定自定义事件
            // this.$refs.student.$once('ITsxt',this.getStudentName)  //绑定一次性自定义事件
    },
}
</script>

<style>
      .app{
        background-color:bisque;
        padding: 5px;
    }
</style>